<template>
  <div class="goods">
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="thumb" >
      </van-swipe-item>
    </van-swipe>

    <div class="list_groups">
        <div v-for="item in List " :key="item.id" class="card_list" @click="getDtails(item.id)">
            <div class="van-card flex_left">
                <!-- <img :src="item.img"/> -->
                <video :src='item.videoSrc' controls preload></video>
                <div class="card_right">
                    <div class="flex">
                        <div class="title">{{item.title}}</div>
                        <div class="desc">{{item.address}}</div>
                    </div>
                    <div class="desc">{{item.desc}}</div>
                    <div class="tag_group flex_left">
                        <van-tag plain type="danger" v-for="tag in item.tag " :key="tag">{{tag}}</van-tag>
                    </div>
                     <div class="flex">
                        <div class="desc">浏览{{item.browseNum}}人</div>
                        <div class="desc">报名{{item.signNum}}人</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    



 
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  Card ,
  Toast,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn
} from 'vant';

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Card.name]: Card,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  },

  data() {
    return {
      goods: {
        title: '美国伽力果（约680g/3个）',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
        ]
      },
      List:[
          {
              id:0,
              videoSrc:'https://ksv-video-publish.cdn.bcebos.com/0c30185e645d6b146ea329d2b20390519318641d.mp4?auth_key=1560940712-0-0-bb28984766dc5c328b9e414e914dbccb',
              title:'美国伽力果',
              tag:['地铁旁','学区房','公园房'],
              address:'高新区',
              desc:'环境优美，空气清新',
              browseNum:220,
              signNum:222

          },
           {
              id:1,
              videoSrc:'https://ksv-video-publish.cdn.bcebos.com/4bdad03803969368afbeafc0dd728360bb670e22.mp4?auth_key=1560938392-0-0-295a8305e5e5c082065b7fe2b32967c8',
              title:'画家朗',
              tag:['地铁旁','公园房'],
              address:'高新区',
              desc:'环境优美，空气清新',
              browseNum:20,
              signNum:22

          },
          {
              id:2,
              videoSrc:'https://ksv-video-publish.cdn.bcebos.com/4676235ea0307f32ae3c54504b3dba08040084a1.mp4?auth_key=1560929066-0-0-b363f03a8d6bee367f25ecb53424794e',
              title:'langji-tianxiang',
              tag:['家电齐全','交通便利','地铁旁'],
              address:'高新区',
              desc:'处于闹市，各种小吃',
              browseNum:66,
              signNum:22

          },
      ]
    };
  },

  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    },

    onClickCart() {
      this.$router.push('cart');
    },

    sorry() {
      Toast('暂无后续逻辑~');
    },
    getDtails(id){
      this.$router.push({
        path:'/group',
        query:{
          id:id
        } 
      })
    }
  }
};
</script>

<style lang="less" scoped>
.goods {
  padding-bottom: 50px;
  &-swipe {
    img {
      width: 100%;
      display: block;
      height: 200px;
    }
  }

  .van-tag {
    margin-right: 2px;
  }
  .list_groups{
      padding: 10px 10px;
      box-sizing: border-box;
      .card_list{
          margin-bottom: 10px;
          .van-card{
              position: static;
              border: 1px solid #e5e5e5;
              padding:15px 15px;
              box-sizing: border-box;
              video{
                  width: 140px;
                  height: 100px;
              }
              .card_right{
                  width: 100%;
                margin-left: 15px;
              }
              .desc{
                  color: #9A9B9C;
                  margin-top: 2px;
              }
              .tag_group{
                  margin-top: 5px;
                  margin-bottom: 5px;
              }
          }
      }
  }
  .flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .flex_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
</style>
